<template>
  <div class="editor-page">
    <div class="editor-container">
      <div class="editor-card">
        <header class="editor-toolbar">
          <div class="toolbar-left">
            <button
              v-if="isMobile"
              class="sidebar-btn"
              @click="onToggleSidebar && onToggleSidebar()"
            >
              ☰ 菜单
            </button>
            <div class="title-input-wrapper">
              <button 
                class="icon-picker-btn" 
                @click="showIconPicker = !showIconPicker"
                :title="selectedIcon ? '点击更换图标' : '点击选择图标'"
              >
                <i v-if="selectedIcon" :class="selectedIcon" :style="{ color: selectedColor }"></i>
                <i v-else class="fa-solid fa-icons"></i>
              </button>
              <input
                type="text"
                v-model="noteTitleLocal"
                class="title-input"
                placeholder="笔记标题"
              />
            </div>
          </div>

          <div class="toolbar-right">
            <button class="preview-toggle desktop-only" @click="togglePreview">
              {{ showPreview ? '编辑模式' : '编辑 + 预览' }}
            </button>

            <div class="stats desktop-only">
              <span>字数：{{ wordCount }}</span>
              <span>行数：{{ lineCount }}</span>
            </div>

            <div class="save-group">
              <span class="status" v-if="autoSaveStatus">{{ autoSaveStatus }}</span>
              <button class="save-btn" @click="onSaveClick">保存</button>
            </div>
          </div>
        </header>

        <!-- 图标选择器 -->
        <div v-if="showIconPicker" class="icon-picker-overlay" @click="showIconPicker = false">
          <div class="icon-picker" @click.stop>
            <div class="icon-picker-header">
              <h3>选择图标和颜色</h3>
              <button class="close-btn" @click="showIconPicker = false">
                <i class="fa-solid fa-times"></i>
              </button>
            </div>
            <div class="icon-categories">
              <button 
                v-for="category in iconCategories" 
                :key="category.name"
                class="category-btn"
                :class="{ active: selectedCategory === category.name }"
                @click="selectedCategory = category.name"
              >
                {{ category.label }}
              </button>
            </div>
            <div class="color-selector">
              <span class="color-label">颜色：</span>
              <div class="color-options">
                <button 
                  v-for="color in iconColors" 
                  :key="color.name"
                  class="color-btn"
                  :class="{ active: selectedColor === color.value }"
                  :style="{ backgroundColor: color.value }"
                  @click="selectedColor = color.value"
                  :title="color.name"
                ></button>
                <input 
                  type="color" 
                  class="custom-color-btn"
                  v-model="selectedColor"
                  title="自定义颜色"
                />
              </div>
            </div>
            <div class="icon-grid">
              <button 
                v-for="icon in currentIcons" 
                :key="icon"
                class="icon-btn"
                :class="{ selected: selectedIcon === icon }"
                @click="selectIcon(icon)"
                :title="icon"
                :style="{ color: selectedColor }"
              >
                <i :class="icon"></i>
              </button>
            </div>
            <div class="icon-picker-footer">
              <button class="btn btn-secondary" @click="selectedIcon = ''">清除图标</button>
              <button class="btn btn-primary" @click="showIconPicker = false">确定</button>
            </div>
          </div>
        </div>

        <section class="editor-body" :class="{ 'preview-open': showPreview }">
          <div class="edit-panel">
            <div class="panel-header">
              <div class="panel-title">
                <strong>编辑</strong>
                <span class="hint">支持 Markdown 语法</span>
              </div>
              <div class="markdown-toolbar">
                <button class="md-btn" @click="insertMarkdown('**', '**')" title="加粗">
                  <i class="fa-solid fa-bold"></i>
                </button>
                <button class="md-btn" @click="insertMarkdown('*', '*')" title="斜体">
                  <i class="fa-solid fa-italic"></i>
                </button>
                <button class="md-btn" @click="insertMarkdown('`', '`')" title="行内代码">
                  <i class="fa-solid fa-code"></i>
                </button>
                <button class="md-btn" @click="insertCodeBlock()" title="代码块">
                  <i class="fa-solid fa-file-code"></i>
                </button>
                <button class="md-btn" @click="insertMarkdown('[', '](url)')" title="链接">
                  <i class="fa-solid fa-link"></i>
                </button>
                <button class="md-btn" @click="insertMarkdown('![', '](url)')" title="图片">
                  <i class="fa-solid fa-image"></i>
                </button>
                <button class="md-btn" @click="insertMarkdown('- ', '')" title="无序列表">
                  <i class="fa-solid fa-list"></i>
                </button>
                <button class="md-btn" @click="insertMarkdown('1. ', '')" title="有序列表">
                  <i class="fa-solid fa-list-ol"></i>
                </button>
                <button class="md-btn" @click="insertMarkdown('> ', '')" title="引用">
                  <i class="fa-solid fa-quote-left"></i>
                </button>
                <button class="md-btn" @click="insertMarkdown('# ', '')" title="标题">
                  <i class="fa-solid fa-heading"></i>
                </button>
              </div>
              <button class="preview-toggle mobile-only" @click="togglePreview">
                {{ showPreview ? '仅编辑' : '编辑 + 预览' }}
              </button>
            </div>

            <textarea
              v-model="noteContentLocal"
              class="editor-textarea"
              placeholder="# 在这里写 Markdown 内容...\n\n- 使用 #, ##, ### 表示标题\n- 使用 * 或 - 表示列表\n- 使用 **加粗** 或 *斜体*"
            />

            <div class="panel-footer">
              <span>字数：{{ wordCount }} · 行数：{{ lineCount }}</span>
              <span v-if="lastSavedAt">上次保存：{{ lastSavedAt }}</span>
            </div>
          </div>

          <div v-if="showPreview" class="preview-panel">
            <div class="panel-header">
              <div class="panel-title">
                <strong>预览</strong>
                <span class="hint">实时查看 Markdown 渲染效果</span>
              </div>
            </div>
            <div class="preview-content" v-html="previewHtml" />
          </div>
        </section>
      </div>
    </div>
  </div>
</template>


<script setup>
import { ref, watch, computed } from 'vue';
import { marked } from 'marked';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

// 配置 marked
marked.setOptions({
  highlight: function(code, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(code, { language: lang }).value;
      } catch (err) {}
    }
    return hljs.highlightAuto(code).value;
  },
  breaks: true,
  gfm: true,
});

const props = defineProps({
  selectedNote: Object,
  noteContent: String,
  setNoteContent: Function,
  noteTitle: String,
  setNoteTitle: Function,
  handleSave: Function,
  isMobile: Boolean,
  onToggleSidebar: Function,
});

const noteTitleLocal = ref(props.noteTitle || '');
const noteContentLocal = ref(props.noteContent || '');

const showPreview = ref(false);
const autoSaveStatus = ref('');
const lastSavedAt = ref('');
let autoSaveTimer = null;

// 图标相关
const showIconPicker = ref(false);
const selectedIcon = ref('');
const selectedCategory = ref('common');
const selectedColor = ref('#5b6479');

watch(
  () => props.noteTitle,
  (val) => {
    noteTitleLocal.value = val || '';
  },
  { immediate: true }
);

watch(
  () => props.noteContent,
  (val) => {
    noteContentLocal.value = val || '';
  },
  { immediate: true }
);

// 字数和行数统计
const wordCount = computed(() => {
  if (!noteContentLocal.value) return 0;
  return noteContentLocal.value.replace(/\s+/g, '').length;
});

const lineCount = computed(() => {
  if (!noteContentLocal.value) return 1;
  return noteContentLocal.value.split(/\r?\n/).length;
});

// 简易 Markdown 转 HTML（使用 marked 库）
const previewHtml = computed(() => {
  if (!noteContentLocal.value) return '';
  
  try {
    return marked(noteContentLocal.value);
  } catch (err) {
    console.error('Markdown 渲染错误:', err);
    return '<p style="color: #f06565;">内容渲染失败</p>';
  }
});

function formatTime(date) {
  const d = date instanceof Date ? date : new Date(date);
  const hh = String(d.getHours()).padStart(2, '0');
  const mm = String(d.getMinutes()).padStart(2, '0');
  const ss = String(d.getSeconds()).padStart(2, '0');
  return `${hh}:${mm}:${ss}`;
}

function onSaveClick() {
  doSave(false);
}

// 简单自动保存：输入停顿 2 秒后自动保存
watch(
  [noteTitleLocal, noteContentLocal],
  () => {
    autoSaveStatus.value = '正在编辑…';
    if (autoSaveTimer) {
      clearTimeout(autoSaveTimer);
    }
    autoSaveTimer = setTimeout(() => {
      doSave(true);
    }, 2000);
  }
);

function togglePreview() {
  showPreview.value = !showPreview.value;
}

function insertMarkdown(before, after) {
  const textarea = document.querySelector('.editor-textarea');
  if (!textarea) return;
  
  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;
  const text = textarea.value;
  const selectedText = text.substring(start, end);
  
  const newText = before + selectedText + after;
  const updatedText = text.substring(0, start) + newText + text.substring(end);
  
  noteContentLocal.value = updatedText;
  
  // 重新设置光标位置
  setTimeout(() => {
    textarea.focus();
    textarea.setSelectionRange(start + before.length, start + before.length + selectedText.length);
  }, 0);
}

function insertCodeBlock() {
  const textarea = document.querySelector('.editor-textarea');
  if (!textarea) return;
  
  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;
  const text = textarea.value;
  const selectedText = text.substring(start, end) || '代码';
  
  const codeBlock = '\n```\n' + selectedText + '\n```\n';
  const updatedText = text.substring(0, start) + codeBlock + text.substring(end);
  
  noteContentLocal.value = updatedText;
  
  // 重新设置光标位置
  setTimeout(() => {
    textarea.focus();
    textarea.setSelectionRange(start + 5, start + 5 + selectedText.length);
  }, 0);
}

// 图标分类数据
const iconCategories = [
  { name: 'common', label: '常用' },
  { name: 'file', label: '文件' },
  { name: 'work', label: '工作' },
  { name: 'life', label: '生活' },
  { name: 'study', label: '学习' },
  { name: 'tech', label: '技术' },
  { name: 'star', label: '标记' }
];

// 颜色选项数据
const iconColors = [
  { name: '默认灰色', value: '#5b6479' },
  { name: '蓝色', value: '#4c6ef5' },
  { name: '绿色', value: '#3bb273' },
  { name: '红色', value: '#f06565' },
  { name: '橙色', value: '#ff9800' },
  { name: '紫色', value: '#9c27b0' },
  { name: '青色', value: '#00bcd4' },
  { name: '粉色', value: '#e91e63' },
  { name: '深蓝', value: '#1565c0' },
  { name: '深绿', value: '#2e7d32' },
  { name: '深红', value: '#c62828' },
  { name: '金色', value: '#ffa000' }
];

const iconData = {
  common: [
    'fa-solid fa-file',
    'fa-solid fa-folder',
    'fa-solid fa-bookmark',
    'fa-solid fa-star',
    'fa-solid fa-heart',
    'fa-solid fa-flag',
    'fa-solid fa-tag',
    'fa-solid fa-bell'
  ],
  file: [
    'fa-solid fa-file-lines',
    'fa-solid fa-file-code',
    'fa-solid fa-file-image',
    'fa-solid fa-file-video',
    'fa-solid fa-file-audio',
    'fa-solid fa-file-archive',
    'fa-solid fa-file-excel',
    'fa-solid fa-file-pdf'
  ],
  work: [
    'fa-solid fa-briefcase',
    'fa-solid fa-chart-line',
    'fa-solid fa-calendar',
    'fa-solid fa-users',
    'fa-solid fa-tasks',
    'fa-solid fa-project-diagram',
    'fa-solid fa-clipboard',
    'fa-solid fa-envelope'
  ],
  life: [
    'fa-solid fa-home',
    'fa-solid fa-car',
    'fa-solid fa-shopping-cart',
    'fa-solid fa-utensils',
    'fa-solid fa-plane',
    'fa-solid fa-music',
    'fa-solid fa-camera',
    'fa-solid fa-gamepad'
  ],
  study: [
    'fa-solid fa-graduation-cap',
    'fa-solid fa-book',
    'fa-solid fa-lightbulb',
    'fa-solid fa-pencil',
    'fa-solid fa-calculator',
    'fa-solid fa-flask',
    'fa-solid fa-microscope',
    'fa-solid fa-globe'
  ],
  tech: [
    'fa-solid fa-laptop-code',
    'fa-solid fa-database',
    'fa-solid fa-server',
    'fa-solid fa-cloud',
    'fa-solid fa-mobile',
    'fa-solid fa-wifi',
    'fa-solid fa-robot',
    'fa-solid fa-cog'
  ],
  star: [
    'fa-solid fa-star',
    'fa-regular fa-star',
    'fa-solid fa-star-half-stroke',
    'fa-solid fa-trophy',
    'fa-solid fa-medal',
    'fa-solid fa-award',
    'fa-solid fa-certificate',
    'fa-solid fa-ribbon'
  ]
};

// 计算当前分类的图标
const currentIcons = computed(() => {
  return iconData[selectedCategory.value] || [];
});

// 选择图标
function selectIcon(icon) {
  selectedIcon.value = icon;
}

// 监听选中笔记变化，初始化图标和颜色
watch(
  () => props.selectedNote,
  (note) => {
    if (note && note.icon) {
      selectedIcon.value = note.icon;
      selectedColor.value = note.iconColor || '#5b6479';
    } else {
      selectedIcon.value = '';
      selectedColor.value = '#5b6479';
    }
  },
  { immediate: true }
);

// 修改保存函数，包含图标信息
function doSave(triggerAuto = false) {
  props.setNoteTitle && props.setNoteTitle(noteTitleLocal.value);
  props.setNoteContent && props.setNoteContent(noteContentLocal.value);
  // 保存图标和颜色信息到父组件
  if (props.selectedNote) {
    props.selectedNote.icon = selectedIcon.value;
    props.selectedNote.iconColor = selectedColor.value;
  }
  props.handleSave && props.handleSave();
  lastSavedAt.value = formatTime(new Date());
  autoSaveStatus.value = triggerAuto ? '已自动保存' : '已保存';
  setTimeout(() => {
    autoSaveStatus.value = '';
  }, 1500);
}
</script>

<style scoped>
:global(body) {
  background: #eef1f6;
}

.editor-page {
  min-height: calc(100vh - 72px);
  background: linear-gradient(180deg, #f4f6fb 0%, #edf0f6 100%);
}

.editor-container {
  max-width: 1100px;
  margin: 0 auto;
  height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
}

.editor-card {
  background: #fff;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
  border: 1px solid #e5e9f2;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #eef2f7;
  background: rgba(248, 250, 255, 0.9);
  backdrop-filter: blur(6px);
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 240px;
}

.sidebar-btn {
  border: 1px solid #d0d7e7;
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  color: #5b6479;
}

.title-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #cfd7eb;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 600;
  background: #fff;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.title-input:focus {
  outline: none;
  border-color: #5c8dff;
  box-shadow: 0 0 0 3px rgba(92, 141, 255, 0.2);
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.preview-toggle {
  border: 1px solid #cfd7eb;
  background: #f6f8fc;
  color: #5b6479;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
}

.stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #8b94a7;
  text-align: right;
}

.save-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status {
  font-size: 12px;
  color: #8b94a7;
}

.save-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(120deg, #4c6ef5, #5f8bff);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(76, 110, 245, 0.3);
}

.editor-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.edit-panel,
.preview-panel {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.markdown-toolbar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  order: 2;
}

.md-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #d0d7e7;
  background: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #6b7280;
  font-size: 13px;
  transition: all 0.2s ease;
}

.md-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #374151;
}

.md-btn:active {
  background: #e5e7eb;
  transform: scale(0.95);
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #4b5675;
}

.panel-title strong {
  font-size: 15px;
}

.hint {
  font-size: 12px;
  color: #9aa3b8;
}

.editor-textarea {
  min-height: 500px;
  flex: 1;
  border: 1px solid #d5ddee;
  border-radius: 16px;
  padding: 18px;
  font-family: 'Fira Code', Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  background: #f8faff;
  resize: none;
}

.editor-textarea:focus {
  outline: none;
  border-color: #5c8dff;
  box-shadow: 0 0 0 3px rgba(92, 141, 255, 0.15);
}

.panel-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-size: 12px;
  color: #8b94a7;
}

.preview-panel {
  border-top: 1px solid #f1f3f8;
  background: #f9fbff;
}

.preview-content {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  border: 1px solid #dfe5f3;
  border-radius: 16px;
  background: #fff;
  color: #2f3a5a;
}

.preview-content h1,
.preview-content h2,
.preview-content h3,
.preview-content h4,
.preview-content h5,
.preview-content h6 {
  margin: 0 0 12px;
  font-weight: 600;
}

.preview-content p {
  margin: 0 0 10px;
}

.preview-content ul {
  margin: 0 0 12px 20px;
  padding: 0;
}

.preview-content li {
  margin-bottom: 6px;
}

.preview-content strong {
  font-weight: 700;
}

.preview-content em {
  font-style: italic;
}

.desktop-only {
  display: none;
}

.mobile-only {
  display: inline-flex;
  border: 1px solid #cfd7eb;
  background: #fff;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 13px;
  color: #5b6479;
  cursor: pointer;
}

@media (min-width: 900px) {
  .editor-body {
    flex-direction: row;
  }

  .preview-panel {
    border-top: none;
    border-left: 1px solid #f1f3f8;
  }

  .desktop-only {
    display: inline-flex;
  }

  .mobile-only {
    display: none;
  }
}

@media (max-width: 899px) {
  .save-btn {
    width: 100%;
  }

  .toolbar-right {
    width: 100%;
    justify-content: space-between;
  }
  
  .markdown-toolbar {
    order: 3;
    width: 100%;
    justify-content: center;
  }
  
  .panel-header {
    flex-direction: column;
    align-items: stretch;
  }
}

/* 图标选择器样式 */
.title-input-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
}

.icon-picker-btn {
  padding: 12px;
  border: 1px solid #cfd7eb;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transition: all 0.2s ease;
  color: #5b6479;
}

.icon-picker-btn:hover {
  border-color: #4c6ef5;
  color: #4c6ef5;
  background: rgba(76, 110, 245, 0.05);
}

.title-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #cfd7eb;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.icon-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.icon-picker {
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.icon-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #eef2f7;
}

.icon-picker-header h3 {
  margin: 0;
  font-size: 18px;
  color: #2f3a5a;
}

.close-btn {
  border: none;
  background: none;
  cursor: pointer;
  padding: 8px;
  color: #7b86a4;
  font-size: 16px;
}

.close-btn:hover {
  color: #2f3a5a;
}

.icon-categories {
  display: flex;
  gap: 8px;
  padding: 16px 24px;
  border-bottom: 1px solid #eef2f7;
  flex-wrap: wrap;
}

.category-btn {
  padding: 6px 12px;
  border: 1px solid #e1e5e9;
  border-radius: 20px;
  background: white;
  cursor: pointer;
  font-size: 14px;
  color: #5b6479;
  transition: all 0.2s ease;
}

.category-btn:hover {
  border-color: #4c6ef5;
  color: #4c6ef5;
}

.category-btn.active {
  background: #4c6ef5;
  border-color: #4c6ef5;
  color: white;
}

.color-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid #eef2f7;
}

.color-label {
  font-size: 14px;
  color: #5b6479;
  font-weight: 500;
}

.color-options {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.color-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #e1e5e9;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.color-btn:hover {
  transform: scale(1.1);
  border-color: #4c6ef5;
}

.color-btn.active {
  border-color: #4c6ef5;
  box-shadow: 0 0 0 2px rgba(76, 110, 245, 0.2);
}

.color-btn.active::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(0,0,0,0.5);
}

.custom-color-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #e1e5e9;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}

.custom-color-btn::-webkit-color-swatch-wrapper {
  padding: 0;
}

.custom-color-btn::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  gap: 8px;
  padding: 16px 24px;
  max-height: 300px;
  overflow-y: auto;
}

.icon-btn {
  width: 50px;
  height: 50px;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #5b6479;
  transition: all 0.2s ease;
}

.icon-btn:hover {
  border-color: #4c6ef5;
  color: #4c6ef5;
  background: rgba(76, 110, 245, 0.05);
}

.icon-btn.selected {
  border-color: #4c6ef5;
  color: #4c6ef5;
  background: rgba(76, 110, 245, 0.1);
}

.icon-picker-footer {
  display: flex;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid #eef2f7;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.btn-primary {
  background: #4c6ef5;
  color: white;
}

.btn-primary:hover {
  background: #3b5bdb;
}

.btn-secondary {
  background: #f1f3f5;
  color: #5b6479;
}

.btn-secondary:hover {
  background: #e9ecef;
}
</style>
